<template>
  <div class="json-formatter">
    <div class="editor-container">
      <div class="editor-wrapper">
        <MonacoEditor
          v-model="inputValue"
          language="json"
          :options="editorOptions"
          @change="handleInputChange"
          class="editor"
          placeholder="请输入 JSON 数据..."
        />
      </div>
      
      <div class="editor-wrapper">
        <MonacoEditor
          v-model="outputValue"
          language="json"
          :options="{ ...editorOptions, readOnly: true }"
          class="editor"
        />
      </div>

      <div class="toolbar">
        <div class="left-actions">
          <el-tooltip content="导入文件" placement="bottom">
            <button class="action-btn">
              <el-icon><Upload /></el-icon>
            </button>
          </el-tooltip>
          <el-tooltip content="下载文件" placement="bottom">
            <button class="action-btn">
              <el-icon><Download /></el-icon>
            </button>
          </el-tooltip>
          <el-tooltip content="格式化 (Ctrl + S)" placement="bottom">
            <button class="action-btn">
              <el-icon><List /></el-icon>
            </button>
          </el-tooltip>
          <el-tooltip content="清空 (Ctrl + L)" placement="bottom">
            <button class="action-btn">
              <el-icon><Delete /></el-icon>
            </button>
          </el-tooltip>
          <el-tooltip content="复制" placement="bottom">
            <button class="action-btn">
              <el-icon><DocumentCopy /></el-icon>
            </button>
          </el-tooltip>
          <el-tooltip content="粘贴" placement="bottom">
            <button class="action-btn">
              <el-icon><Document /></el-icon>
            </button>
          </el-tooltip>
        </div>

        <div class="right-actions">
          <el-tooltip content="自动换行" placement="bottom">
            <button class="action-btn">
              <el-icon><Operation /></el-icon>
            </button>
          </el-tooltip>
          <el-tooltip content="主题切换" placement="bottom">
            <button class="action-btn">
              <el-icon><Sunny /></el-icon>
            </button>
          </el-tooltip>
          <div class="divider"></div>
          <el-tooltip content="保留转义" placement="bottom">
            <button class="action-btn">
              <el-icon><Check /></el-icon>
            </button>
          </el-tooltip>
        </div>
      </div>

      <button class="fullscreen-btn">
        <el-icon><FullScreen /></el-icon>
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { 
  Upload,
  Download,
  List,
  Delete,
  DocumentCopy,
  Document,
  Operation,
  Sunny,
  Check,
  FullScreen
} from '@element-plus/icons-vue'
import MonacoEditor from '@/components/MonacoEditor.vue'

const inputValue = ref('')
const outputValue = ref('')
const errorMessage = ref('')

// Monaco Editor 配置
const editorOptions = {
  theme: 'vs',
  fontSize: 14,
  tabSize: 2,
  minimap: { enabled: false },
  scrollBeyondLastLine: false,
  automaticLayout: true,
  formatOnPaste: true,
  lineNumbers: 'on',
  roundedSelection: true,
  renderLineHighlight: 'none',
  scrollbar: {
    vertical: 'hidden',
    horizontal: 'hidden'
  },
  overviewRulerLanes: 0,
  hideCursorInOverviewRuler: true,
  renderIndentGuides: false,
  padding: { top: 16, bottom: 16 },
}

// 格式化 JSON
const formatJSON = () => {
  try {
    const parsed = JSON.parse(inputValue.value)
    outputValue.value = JSON.stringify(parsed, null, 2)
    errorMessage.value = ''
  } catch (err) {
    errorMessage.value = err instanceof Error ? err.message : '无效的 JSON 格式'
  }
}

// 压缩 JSON
const compressJSON = () => {
  try {
    const parsed = JSON.parse(inputValue.value)
    outputValue.value = JSON.stringify(parsed)
    errorMessage.value = ''
  } catch (err) {
    errorMessage.value = err instanceof Error ? err.message : '无效的 JSON 格式'
  }
}

// 复制结果
const copyResult = async () => {
  try {
    await navigator.clipboard.writeText(outputValue.value)
    ElMessage.success('复制成功')
  } catch (err) {
    ElMessage.error('复制失败')
  }
}

// 清空内容
const clearAll = () => {
  inputValue.value = ''
  outputValue.value = ''
  errorMessage.value = ''
}

// 处理输入变化
const handleInputChange = (value: string) => {
  try {
    JSON.parse(value)
    errorMessage.value = ''
  } catch (err) {
    errorMessage.value = err instanceof Error ? err.message : '无效的 JSON 格式'
  }
}
</script>

<style lang="scss" scoped>
.json-formatter {
  height: 100vh;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: $spacing-xl;

  .editor-container {
    width: 100%;
    max-width: 1400px;
    height: 100%;
    max-height: 800px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: #f5f5f5;
    border-radius: 12px;
    position: relative;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);

    .editor-wrapper {
      background: white;
      position: relative;
      overflow: hidden;

      &:first-child {
        border-top-left-radius: 12px;
        border-bottom-left-radius: 12px;
      }

      &:last-child {
        border-top-right-radius: 12px;
        border-bottom-right-radius: 12px;
      }

      .editor {
        height: 100%;
      }
    }

    .toolbar {
      position: absolute;
      top: 12px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: white;
      border-radius: 8px;
      padding: 4px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
      z-index: 10;
      gap: 8px;

      .left-actions,
      .right-actions {
        display: flex;
        align-items: center;
        gap: 2px;
      }

      .divider {
        width: 1px;
        height: 16px;
        background: #eee;
        margin: 0 2px;
      }

      .action-btn {
        width: 28px;
        height: 28px;
        border: none;
        border-radius: 6px;
        background: transparent;
        color: #666;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease;

        &:hover {
          background: #f5f5f5;
          color: #333;
        }

        .el-icon {
          font-size: 16px;
        }
      }
    }

    .fullscreen-btn {
      position: absolute;
      top: 12px;
      right: 12px;
      width: 28px;
      height: 28px;
      border: none;
      border-radius: 6px;
      background: white;
      color: #666;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

      &:hover {
        background: #f5f5f5;
        color: #333;
      }

      .el-icon {
        font-size: 16px;
      }
    }
  }
}

// 暗黑模式适配
:root.dark {
  .json-formatter {
    background: $dark-background;

    .editor-container {
      background: rgba(255, 255, 255, 0.1);
      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);

      .editor-wrapper {
        background: $dark-background;
      }

      .toolbar {
        background: $dark-background-secondary;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);

        .divider {
          background: rgba(255, 255, 255, 0.1);
        }

        .action-btn {
          color: rgba(255, 255, 255, 0.6);

          &:hover {
            background: rgba(255, 255, 255, 0.05);
            color: rgba(255, 255, 255, 0.9);
          }
        }
      }

      .fullscreen-btn {
        background: $dark-background-secondary;
        color: rgba(255, 255, 255, 0.6);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);

        &:hover {
          background: rgba(255, 255, 255, 0.05);
          color: rgba(255, 255, 255, 0.9);
        }
      }
    }
  }
}
</style> 